<template>
    <div class="class">
         <el-row>
            <el-col :span="12" :offset="18">
                <el-button type="primary" icon="plus" @click="onAddClass">添加课程</el-button>
            </el-col>
        </el-row>
        <div class="divline"></div>
        
        <el-table :data="tableData" border style="width: 100%" align='center'>
            <el-table-column
                :prop="fields.title.info.prop"
                :label="fields.title.info.label"
                :align="fields.title.style.align"
                :width="fields.title.style.width"
                :sortable="fields.title.info.sortable">
            </el-table-column>
            <el-table-column
                :prop="fields.author.info.prop"
                :label="fields.author.info.label"
                :align="fields.author.style.align"
                :width="fields.author.style.width"
                :formatter="formatterAuthor"
                :sortable="fields.author.info.sortable">
            </el-table-column>
            <el-table-column
                :prop="fields.cover_url.info.prop"
                :label="fields.cover_url.info.label"
                :align="fields.cover_url.style.align"
                :width="fields.cover_url.style.width"
                :sortable="fields.cover_url.info.sortable">
            </el-table-column>
            <el-table-column
                :prop="fields.video_url.info.prop"
                :label="fields.video_url.info.label"
                :align="fields.video_url.style.align"
                :width="fields.video_url.style.width"
                :sortable="fields.video_url.info.sortable">
            </el-table-column>
            <el-table-column
                :prop="fields.need_integral.info.prop"
                :label="fields.need_integral.info.label"
                :align="fields.need_integral.style.align"
                :width="fields.need_integral.style.width"
                :sortable="fields.need_integral.info.sortable">
            </el-table-column>
            <el-table-column
                :prop="fields.start_time.info.prop"
                :label="fields.start_time.info.label"
                :align="fields.start_time.style.align"
                :width="fields.start_time.style.width"
                :formatter="formatterStime"
                :sortable="fields.start_time.info.sortable">
            </el-table-column>
            <!--
            <el-table-column
                :prop="fields.end_time.info.prop"
                :label="fields.end_time.info.label"
                :align="fields.end_time.style.align"
                :width="fields.end_time.style.width"
                :formatter="formatterEtime"
                :sortable="fields.end_time.info.sortable">
            </el-table-column>
            <el-table-column
                :prop="fields.release_time.info.prop"
                :label="fields.release_time.info.label"
                :align="fields.release_time.style.align"
                :width="fields.release_time.style.width"
                :formatter="formatterRtime"
                :sortable="fields.release_time.info.sortable">
            </el-table-column>
            -->
            <el-table-column
                :prop="fields.status.info.prop"
                :label="fields.status.info.label"
                :align="fields.status.style.align"
                :width="fields.status.style.width"
                :sortable="fields.status.info.sortable"
                :formatter="formatterStatus"
                :filters="fields.status.filter.list"
                :filter-method="filterStatus"
                :filter-multiple="fields.status.filter.multiple">
            </el-table-column>
            <el-table-column label="操作" align="center" v-if="checkLevel()">
                <template scope='scope'>
                    <el-tooltip content="编辑课程" placement="left">
                        <el-button type="info"   icon='edit'   size="mini" @click='onEditClass(scope.row)'></el-button>
                    </el-tooltip>
                    <el-tooltip content="预览课程" placement="top">
                        <el-button type="info" icon='document' size="mini" @click='onPreviewClass(scope.row)'></el-button>
                    </el-tooltip>
                    <el-tooltip content="发布课程" placement="bottom">
                        <el-button type="info" icon='share' size="mini" @click='onPostClass(scope.row)'></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除课程" placement="right">
                        <el-button type="danger" icon='delete' size="mini" @click='onDeleteClass(scope.row)'></el-button>
                    </el-tooltip>
                </template>
            </el-table-column> 
        </el-table>

        <el-dialog :title="updateFlag?'修改':'新增' + '课程'" v-model="formVisible" >
            <el-form :model="classForm" ref='classForm' style="width: 90%" label-width="30%" :rules="rules">
                <el-form-item label="课程名称" prop='title'>
                    <el-input v-model="classForm.title" placeholder='请输入课程名称'></el-input>
                </el-form-item>
                <el-form-item label="讲师信息" prop='info'>
                    <el-input v-model="classForm.author.info" placeholder='请输入讲师信息'></el-input>
                </el-form-item>
                <el-form-item label="讲师介绍" prop='describe'>
                    <el-input v-model="classForm.author.describe" placeholder='请输入讲师介绍'></el-input>
                </el-form-item>
                <el-form-item label="视频url" prop='video_url'>
                    <el-input v-model="classForm.video_url" placeholder='请输入视频url'></el-input>
                </el-form-item>
                <el-form-item label="封面url" prop='cover_url'>
                    <el-input v-model="classForm.cover_url" placeholder='请输入封面url'></el-input>
                </el-form-item>
                <el-form-item label="报名积分" prop='need_integral'>
                    <el-input v-model="classForm.need_integral" placeholder='请输入报名所需积分'></el-input>
                </el-form-item>
                <el-form-item label="视频时长" prop='video_length'>
                    <el-input v-model="classForm.video_length" placeholder='请输入报名所需积分'></el-input>
                </el-form-item>
                <el-form-item label="备注" prop='remark'>
                    <el-input v-model="classForm.remark" placeholder='请输入备注'></el-input>
                </el-form-item>
                <el-form-item label="上课时间" prop='class_time'>
                    <el-date-picker
                      v-model="classForm.class_time"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      placeholder="选择上课时间范围"
                      align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="发布时间" prop='release_time'>
                    <el-date-picker
                      v-model="classForm.release_time"
                      type="datetime"
                      placeholder="选择课程发布日期时间"
                      align="right"
                      :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click='save("classForm")'>{{updateFlag ? '修改' : '添加'}}</el-button>
                </el-form-item>
            </el-form>
        </el-dialog> 


        <el-dialog title="课程预览" v-model="previewVisible" >
            <div v-if="previewVisible">
              <p>课程名称:<span>{{previewData.title}}</span></p>
              <p>老师简介:<span>{{JSON.parse(previewData.author).info}}</span></p>
              <p>老师介绍:<span>{{JSON.parse(previewData.author).describe}}</span></p>
              <p>报名积分:<span>{{previewData.need_integral}}</span></p>
              <p>课程开始时间:<span>{{formatterStime(previewData)}}</span></p>
              <p>课程结束时间:<span>{{formatterEtime(previewData)}}</span></p>
              <p>课程发布时间:<span>{{formatterRtime(previewData)}}</span></p>
              <p>视频时长:<span>{{previewData.video_length}}秒</span></p>
              <p>备注:<span>{{previewData.remark}}</span></p>
              <p>封面:<span>url:{{previewData.cover_url}}</span><img :src="previewData.cover_url" style="height:200px;"></p>
              <p>视频:<span>url:{{previewData.video_url}}</span><video :src="previewData.video_url" controls="controls" style="height:200px;"></video></p>

              </div>
        </el-dialog> 
    </div>
</template>

<script>
    import ClassJs from './Class.js';
    module.exports = ClassJs;
</script>
<style scoped>
  .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }     
</style>
